<script>
import ShowMemos from '../components/ShowMemos.vue'
import AddMemo from '../components/AddMemo.vue'
export default {
  name: 'Memo',
  components: {
    ShowMemos,
    AddMemo
  },
  data() {
    return {
      memos: [
        {id: 1, content: '内容1'},
        {id: 2, content: '内容2'},
        {id: 3, content: '内容3'},
        {id: 4, content: '内容4'},
        {id: 5, content: '内容5'}
      ]
    }
  },
  methods: {
    deleteMemo(id) {
      // 删除指定id的备忘录
      this.memos.splice(id, 1)
    },
    addMemo(memoStr) {
      // 添加一个备忘录
      let id = 1
      if (this.memos.length > 0) {
        id = this.memos[this.memos.length - 1].id + 1
      }
      this.memos.push({id, content: memoStr})
    }
  }
}
</script>

<template>
  <!-- 引用展示备忘录信息的子组件, 并传入数据 -->
  <ShowMemos :memos="memos" @deleteMemo="deleteMemo"></ShowMemos>
  <AddMemo @addMemo="addMemo"></AddMemo>
</template>

<style scoped></style>